<template>
  <ul class="left-nav">
    <li
      v-for="(nav, index) in navList"
      :key="nav.id"
      :class="{active: activeIndex === index}"
      @click="switchNav(index)"
    >
      {{nav.title}}
    </li>
  </ul>
</template>

<script>
export default {
  name: '',
  props: {
    navList: {
      type: Array
    }
  },
  data() {
    return {
      activeIndex: 0
    };
  },
  methods: {
    switchNav(index) {
      this.activeIndex = index;
      this.$emit('switchNav', this.navList[index]);
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .left-nav {
    flex: 0 0 200px;
    border: 1px solid #ddd;
    li {
      padding-left: 10px;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ddd;
      color: #666;
      &.active {
        background-color: @mainBgColor;
        color: #fff;
      }
      &:hover {
        background-color: @mainBgHoverColor;
        color: #fff;
        cursor: pointer;
      }
    }
  }
</style>
